<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展会汇总表</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
    <style>
        table {
            margin: 0px !important;
        }

        .table td span {
            color: #489EF1;
            cursor: pointer;
        }

        .hide-detailed {
            display: none;
            background-color: #FBFBFB
        }

        .total td {
            font-weight: bold;
        }

        .clickable {
            color: #489EF1;
            cursor: pointer;
            font-weight: bold;
        }
    </style>
</head>
<body>
<!--<h5 style="text-align: center">2018年展会安排汇总表</h5>-->
<div id="app" style="height: 420px;margin: 10px 20px; overflow: auto;overflow-x: hidden">
    <table class="table table-hover table-bordered text-center">
        <thead>
        <tr>
            <th>展会类型</th>
            <th>1月</th>
            <th>2月</th>
            <th>3月</th>
            <th>4月</th>
            <th>5月</th>
            <th>6月</th>
            <th>7月</th>
            <th>8月</th>
            <th>9月</th>
            <th>10月</th>
            <th>11月</th>
            <th>12月</th>
            <th>合计</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,i) in list" :class="item.companyId!=0?'hide-detailed':''">
            <td v-if="item.companyId==0" class="clickable">{{item.exhibitionTypeName}}</td>
            <td v-if="item.companyId!=0">{{item.companyName}}</td>
            <td><span v-if="item.month1 != 0" @click="addTab(item.companyId,1,item.exhibitionType)">{{item.month1}}</span></td>
            <td><span v-if="item.month2 != 0" @click="addTab(item.companyId,2,item.exhibitionType)">{{item.month2}}</span></td>
            <td><span v-if="item.month3 != 0" @click="addTab(item.companyId,3,item.exhibitionType)">{{item.month3}}</span></td>
            <td><span v-if="item.month4 != 0" @click="addTab(item.companyId,4,item.exhibitionType)">{{item.month4}}</span></td>
            <td><span v-if="item.month5 != 0" @click="addTab(item.companyId,5,item.exhibitionType)">{{item.month5}}</span></td>
            <td><span v-if="item.month6 != 0" @click="addTab(item.companyId,6,item.exhibitionType)">{{item.month6}}</span></td>
            <td><span v-if="item.month7 != 0" @click="addTab(item.companyId,7,item.exhibitionType)">{{item.month7}}</span></td>
            <td><span v-if="item.month8 != 0" @click="addTab(item.companyId,8,item.exhibitionType)">{{item.month8}}</span></td>
            <td><span v-if="item.month9 != 0" @click="addTab(item.companyId,9,item.exhibitionType)">{{item.month9}}</span></td>
            <td><span v-if="item.month10 != 0" @click="addTab(item.companyId,10,item.exhibitionType)">{{item.month10}}</span></td>
            <td><span v-if="item.month11 != 0" @click="addTab(item.companyId,11,item.exhibitionType)">{{item.month11}}</span></td>
            <td><span v-if="item.month12 != 0" @click="addTab(item.companyId,12,item.exhibitionType)">{{item.month12}}</span></td>
            <td><span v-if="item.total != 0" @click="addTab(item.companyId,'',item.exhibitionType)">{{item.total}}</span></td>
        </tr>
        <tr class="total">
            <td>合计</td>
            <td><span v-if="this.months.month1 != 0" @click="addTab('',1,'')">{{this.months.month1}}</span></td>
            <td><span v-if="this.months.month2 != 0" @click="addTab('',2,'')">{{this.months.month2}}</span></td>
            <td><span v-if="this.months.month3 != 0" @click="addTab('',3,'')">{{this.months.month3}}</span></td>
            <td><span v-if="this.months.month4 != 0" @click="addTab('',4,'')">{{this.months.month4}}</span></td>
            <td><span v-if="this.months.month5 != 0" @click="addTab('',5,'')">{{this.months.month5}}</span></td>
            <td><span v-if="this.months.month6 != 0" @click="addTab('',6,'')">{{this.months.month6}}</span></td>
            <td><span v-if="this.months.month7 != 0" @click="addTab('',7,'')">{{this.months.month7}}</span></td>
            <td><span v-if="this.months.month8 != 0" @click="addTab('',8,'')">{{this.months.month8}}</span></td>
            <td><span v-if="this.months.month9 != 0" @click="addTab('',9,'')">{{this.months.month9}}</span></td>
            <td><span v-if="this.months.month10 != 0" @click="addTab('',10,'')">{{this.months.month10}}</span></td>
            <td><span v-if="this.months.month11 != 0" @click="addTab('',11,'')">{{this.months.month11}}</span></td>
            <td><span v-if="this.months.month12 != 0" @click="addTab('',12,'')">{{this.months.month12}}</span></td>
            <td><span v-if="this.months.total != 0" @click="addTab('','','')">{{this.months.total}}</span></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            list: [],
            months: {
                month1: 0, month2: 0, month3: 0, month4: 0, month5: 0, month6: 0, month7: 0, month8: 0, month9: 0,
                month10: 0, month11: 0, month12: 0, total: 0
            }
        },
        methods: {
            addTab: function (companyId, month, exhibitionType) {
                var tabId = "exhibit8888";
                companyId = companyId == 0 ? "" : companyId;
                var url = "crm/exhibition/list.html?companyId=" + companyId + "&month=" + month + "&exhibitionType=" + exhibitionType;
                top.addTabs({id: tabId, title: '展会管理', close: true, url: url});
                top.refreshTabById(tabId);
            }
        },
        mounted: function () {
            var that = this;
            repaintFreeze = function () {
                var freezeElement = $(".table");
                $(".freezeHead").remove();
                var tableCalss = freezeElement.attr("class");
                var tableHead = freezeElement.find("thead").prop("outerHTML");
                var arr = new Array();
                arr.push("<div class='freezeHead' style='position: absolute;'>");
                arr.push("<table class='" + tableCalss + "'>");
                arr.push(tableHead);
                arr.push("</table>");
                arr.push("</div>");
                $(".table").before(arr.join(" "));
                $(".freezeHead table").eq(0).width(freezeElement.eq(1).width());
                $(".table").eq(1).find("th").each(function (i, item) {
                    $(".freezeHead table th").eq(i).width(freezeElement.eq(1).find("th").eq(i).width());
                });
            }
            $.wyui.postMethod(urlConfig.crm.exhibition.getExhibitionSummary, {}, function (data) {
                that.list = data;
                $(data).each(function (i, info) {
                    if (info.companyId != 0) {
                        that.months.month1 += info.month1;
                        that.months.month2 += info.month2;
                        that.months.month3 += info.month3;
                        that.months.month4 += info.month4;
                        that.months.month5 += info.month5;
                        that.months.month6 += info.month6;
                        that.months.month7 += info.month7;
                        that.months.month8 += info.month8;
                        that.months.month9 += info.month9;
                        that.months.month10 += info.month10;
                        that.months.month11 += info.month11;
                        that.months.month12 += info.month12;

                        that.months.total = that.months.month1 + that.months.month2 + that.months.month3 + that.months.month4 + that.months.month5 + that.months.month6 + that.months.month7 + that.months.month8 + that.months.month9 + that.months.month10 + that.months.month11 + that.months.month12;
                    }
                });
            });

            $("table").on("click", ".clickable", function () {
                var thisTr = $(this).parent("tr");
                while (true) {
                    var nextTr = thisTr.next();
                    if (nextTr.attr("class") == undefined || nextTr.attr("class") == "" || nextTr.attr("class") == "total")
                        break;
                    else {
                        $(nextTr).toggle();
                        thisTr = nextTr;
                    }
                }
            });

            repaintFreeze();
            setInterval(function () {
                repaintFreeze();
            }, 300);
        }
    });
</script>
</html>